let recommen = document.getElementById('recommen')

function render(res) { //动态创建页面

    res.result.forEach(item => {

        let div = document.createElement('a')
        div.href = `moneyproduct.html?a=${item.productId}` //内容区域最外层盒子
        div.id = "shop"
        let img = document.createElement("a") //图片放置
            // img.href=item.productInfo1//评论的超链接
        let textLeft = document.createElement("div") //右边放置产品信息的盒子
        let pTop = document.createElement('p') //右边盒子（上面）
        let span = document.createElement('span') //放置价格
        textLeft.id = "recommenLeft"
        span.innerHTML = `价格：${item.productPinkage}`
        span.style.color = "red"
        let pbottom = document.createElement('p') //右边盒子（下面）
        let b = document.createElement('a') //右下盒子放置评论
            // b.href="www.baidu.com"//评论的超链接
        b.style.fontWeight = "400"
        b.innerText = item.productComCount
        pbottom.id = 'b'
        img.innerHTML = item.productImg2
        pTop.innerHTML = item.productName;
        pbottom.innerHTML = `${item.productFrom} | ${item.productTime}`
        div.appendChild(img)
        textLeft.appendChild(pTop)
        pTop.appendChild(span)
        pbottom.appendChild(b)
        textLeft.appendChild(pbottom)
        div.appendChild(textLeft)
        recommen.appendChild(div)



    });




}




let num = 0

function fn(num) {
    ajax({
        url: "http://chst.vip:1234/api/getmoneyctrl",
        data: {
            pageid: num
        },
        success(res) {
            render(res)
                // console.log(res.result);

            // res.result.forEach(item => {

            //     let div = document.createElement('a')
            //     div.href=`moneyproduct.html?a=${item.productId}`//内容区域最外层盒子
            //     div.id = "shop"
            //     let img = document.createElement("a")//图片放置
            //     // img.href=item.productInfo1//评论的超链接
            //     let textLeft = document.createElement("div") //右边放置产品信息的盒子
            //     let pTop = document.createElement('p')//右边盒子（上面）
            //     let span = document.createElement('span') //放置价格
            //     textLeft.id = "recommenLeft"
            //     span.innerHTML = `价格：${item.productPinkage}`
            //     span.style.color = "red"
            //     let pbottom = document.createElement('p')//右边盒子（下面）
            //     let b = document.createElement('a')//右下盒子放置评论
            //     // b.href="www.baidu.com"//评论的超链接
            //     b.style.fontWeight = "400"
            //     b.innerText = item.productComCount
            //     pbottom.id = 'b'
            //     img.innerHTML = item.productImg2
            //     pTop.innerHTML = item.productName;
            //     pbottom.innerHTML = `${item.productFrom} | ${item.productTime}`
            //     div.appendChild(img)
            //     textLeft.appendChild(pTop)
            //     pTop.appendChild(span)
            //     pbottom.appendChild(b)
            //     textLeft.appendChild(pbottom)
            //     div.appendChild(textLeft)
            //     recommen.appendChild(div)



            // });
        }
    })
}
fn(num)
let btnright = document.getElementById('btnright')
let btnLeft = document.getElementById('btnLeft')
let page = document.getElementById('page')


btnLeft.disabled = true



//动态创建下拉页
const getCart = () => ajax({ //
    url: "http://chst.vip:1234/api/getmoneyctrl",
})
getCart()
    .then(res => {
        let pagenum = Math.ceil(res.totalCount / res.pagesize)

        var html = ""
        for (var i = 1; i <= pagenum; i++) {

            html += `
                <option value="">${i} /${pagenum}</option>
                `
        }
        page.innerHTML = html



        btnright.onclick = () => { //下一页点击事件
            // console.log("btnr");
            console.log(btnLeft);
            btnLeft.disabled = false
            recommen.innerHTML = ''
            num++
            if (num === pagenum - 1) {
                btnright.disabled = true
            }
            if (num < pagenum) {
                fn(num)
                page[num].selected = true
                console.log(num);
            }

        }

        btnLeft.onclick = () => { //上一页点击事件

            recommen.innerHTML = ''
            num--
            console.log(num);
            btnright.disabled = false
            if (num === 0) {
                btnLeft.disabled = true
            }
            if (num >= 0) {
                fn(num)

                page[num].selected = true
            }
        }


        page.onchange = () => { //页码选项事件

            btnLeft.disabled = false
            num = page.selectedIndex
            if (num === 0) {
                btnLeft.disabled = true
            }
            if (num === pagenum - 1) {
                btnright.disabled = true
            }

            console.log(num);

            recommen.innerHTML = ''
            fn(num)
        }

    })
    //返回顶部事件
let btn = document.getElementById("btn")
document.querySelector('#recommen').onscroll  =   function()  {
    btn.onclick  =   function()  {

        //加入动画过度效果
        //         document.querySelector('#recommen').scrollTop = 0
        // let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
        let timer = setInterval(() => {
            document.querySelector('#recommen').scrollTop -= 20
            if (document.querySelector('#recommen').scrollTop <= 0) {
                clearInterval(timer)
            }
        }, 10)


            
    }
}